<script setup lang="ts">
import { reactive, toRefs } from 'vue';
import { Icon } from '@iconify/vue';
import { ItemType, resultOptions, useTable } from '@/components/core/dynamic-table/helper';
import DynamicTable, { TableColumn, TableController } from '@/components/core/dynamic-table';
import { Columns } from './table-data';
import { ElSwitch, ElPagination } from 'element-plus';
// import { ADialogInstance } from '@/components/basic/dialog';

const imgPreffix = import.meta.env.VITE_IMG_PREFFIX;

const base = reactive({
  query: 'getItemCateList',
  data: [],
  Params: [],
  listUrl: 'data',
  sort: (a: ItemType, b: ItemType): number => a.id - b.id,
  page: 1,
  size: 14,
  total: 0,
  qForm: {
    // queryForm
    sort: 0
  },
  form: {}
});

const tableState = reactive({ ...useTable(base), ...toRefs(base) }) as resultOptions;

const openEdit = () => {};

const submit = (item: ItemType) => {
  console.log(item);
};
</script>
<template>
  <div class="wh-full flex flex-col box-border pb-2">
    <TableController>
      <template #right>
        <a-button type="primary" @click="openEdit()">Add</a-button>
      </template>
    </TableController>
    <div class="overflow-y-auto w-full p-1 box-border" style="background-color: var(--el-bg-color)">
      <DynamicTable
        height="100%"
        :columns="Columns as unknown as TableColumn<any>[]"
        :default-expand-all="false"
        row-key="id"
        :data="tableState.data"
        v-loading="tableState.loading"
        show-overflow-tooltip
        header-row-class-name="table-header"
      >
        <!-- <ElTableColumn type="selection" width="55" /> -->
        <template #code="container">
          {{ container.scope.row[container.scope.column.property] || '-' }}
        </template>
        <template #thumb="container">
          <div class="flex-cc">
            <div class="w-100px h-100px border border-solid border-color-blue-300">
              <img
                class="w-full h-full object-cover"
                v-lazy="imgPreffix + container.scope.row.thumb"
                :alt="String(container.scope.row.title).slice(0, 6) + '...'"
              />
            </div>
          </div>
        </template>
        <template #switch="container">
          <ElSwitch
            class="ml-2"
            :modelValue="Boolean(container.scope.row.switch)"
            active-text="是"
            inactive-text="否"
            inline-prompt
            @change="val => ((container.scope.row.switch = val ? 1 : 0) || true) && submit(container.scope.row)"
            style="--el-switch-on-color: #13ce66"
          />
        </template>
        <template #avatar="container">
          <span v-show="false">{{ container.scope.row.title }}</span>
          <div class="w-100px border border-solid border-color-blue-300">
            <img
              class="w-full h-full"
              :src="imgPreffix + container.scope.row.thumb"
              :alt="String(container.scope.row.title).slice(0, 6) + '...'"
            />
          </div>
        </template>
        <template #status="container">
          <ElSwitch
            class="ml-2"
            :modelValue="Boolean(container.scope.row.status)"
            active-text="是"
            inactive-text="否"
            inline-prompt
            @change="val => ((container.scope.row.status = val ? 1 : 0) || true) && submit(container.scope.row)"
            style="--el-switch-on-color: #13ce66"
          />
        </template>
        <template #operate="container">
          <a-button type="info" size="small" @click="tableState.editRowItem!(container.scope.row)">
            <!-- 编辑 -->
            <Icon icon="ant-design:edit-outlined" />
          </a-button>
          <a-button type="danger" size="small" @click="tableState.deleteRowItem!(container.scope.row)">
            <!-- 删除 -->
            <Icon icon="ant-design:delete-outlined" />
          </a-button>
        </template>
      </DynamicTable>
    </div>
    <TableController>
      <template #right>
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="tableState.size"
          :total="tableState.total"
          v-model:current-page="tableState.page"
          @change="tableState.pageCurrentChangeHandle"
        />
      </template>
    </TableController>
  </div>
</template>

<style lang="scss" scoped></style>
